<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    两种注册方式：
      1. 全局注册

        语法
          Vue3: 【需要运行在 app.mount() 之前】
            app.component()
          
          Vue2: [需要运行在 new Vue() 之前]
            Vue.component()

      2. 局部注册

        语法: 通过 components 配置项来注册

          components: {
            key: value
          }

            key   - 组件名字
            value - 组件配置对象
    
    两种类型组件的不同之处：
      在于使用范围。
        全局组件可以在任意组件中使用
        局部组件在谁身上注册，就只能在谁身上使用

    更推荐使用局部组件：
        1. 组件间依赖关系可以更清晰的了解到
        2. 全局注册的组件如果没有被使用的话，不会自动被 tree-shaking 掉
          
   -->

    <div id="app"></div>

    <script src="../lib/vue3.js"></script>
    <script>
      const MyButton = {
        template: `
          <button>MyButton</button>
        `,
      };

      const Root = {
        template: `
          <div>
            <h1>Root</h1>  

            <Hello />
          </div>
        `,
      };

      const Hello = {
        template: `
          <div>
            <h2>Hello</h2>

            <World />
          </div>
        `,
      };

      const World = {
        template: `
          <div>
            <h2>World</h2> 
            <MyButton />
          </div>
        `,

        // 局部组件
        components: {
          MyButton,
        },
      };

      // 创建应用实例
      const app = Vue.createApp(Root);

      // 创建全局组件
      app.component("Hello", Hello);
      app.component("World", World);

      // 挂载应用到挂载点
      app.mount("#app");
    </script>
  </body>
</html>
